<template>
  <div class="addaccount-content">
    <div class="addaccount-addinput">
      <p>添加账号</p>
      <div class="adccount">
        账号:<el-input
          placeholder="请输入内容"
          v-model="acc"
          clearable
        >
        </el-input>
        <br />
        密码:<el-input
          placeholder="请输入密码"
          v-model="pwd"
          show-password
        ></el-input
        ><br />
        用户组:<el-select v-model="grouping" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <br />
        <el-button type="success" @click="clickadd">添加</el-button>
        <el-button type="primary" @click="resetclick">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {addAccount} from '@/apis/users'
export default {
  data() {
    return {
      acc: "",//账号
      pwd: "",//密码
      grouping: "普通管理员",//默认选择
      options: [
        {
          value: "超级管理员",
          label: "超级管理员",
        },
        {
          value: "普通管理员",
          label: "普通管理员",
        },
      ],
    };
  },
  methods: {
    clickadd(){//添加账号
      addAccount({
        account:this.acc,
        password:this.pwd,
        userGroup:this.grouping
      }).then(res=>{
        if(res.data.code==0){
          this.$message({
          message: '添加成功！',
          type: 'success'
        });
        }
      })
    },
    resetclick(){//重置
      this.acc='',
      this.pwd='',
      this.grouping=''
    }
  },
};
</script>

<style lang="less" scoped>
.addaccount-addinput {
  p {
    height: 30px;
    font-size: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 30px;
  }
}
.el-input {
  width: 50%;
  margin-bottom: 30px;
}
.el-select {
  margin-bottom: 30px;
}
</style>